<template>
  <div class="new">
    <div class="u-title">
      <h3>
        <span  class="f-ff2">
          优秀新电台
        </span>
      </h3>
    </div>
    <ul class="m-rdilist">
      <li v-for="(item,index) in hotList" :key="index">
        <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="u-cover" :title="item.name">
          <img v-lazy="item.picUrl" alt="">
        </router-link>
        <h3 class="f-fs2">
          <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="f-fs1" :title="item.name">{{item.name}}</router-link>
        </h3>
        <p class="f-thide2" :title="item.rcmdtext">{{item.rcmdtext}}</p>
      </li>
    </ul>
    <div class="rdimore">
      <div class="u-title">
        <h3>
          <span  class="f-ff2">
            电台排行榜
          </span>
        </h3>
      </div>
      <ul class="rdilist">
        <li v-for="(item,index) in djList" :key="index">
          <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="u-cover-rdi">
            <img alt="" v-lazy="item.picUrl">
          </router-link>
          <div class="cntr">
            <h3 class="f-fs3">
              <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="s-fc1" :title="item.name">{{item.name}}</router-link>
            </h3>
            <p class="note" title="item.rcmdtext">
              <i class="u-icon"></i>
              <router-link :to="{name:'UserDetailView',params:{id:item.dj.userId,type:1}}" class="sep">{{item.dj.nickname}}</router-link>
              <img v-lazy="item.dj.avatarDetail.identityIconUrl" alt="" class="img" v-if="item.dj.avatarDetail">
            </p>
            <p class="s-sf4">共{{item.programCount}}期&nbsp;&nbsp;&nbsp;&nbsp;订阅{{ item.subCount }}次</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分页器 -->
    <Pagination :pageNo='pageNo' :pageSize='pageSize' :total='total' :continues='7' @getPageNo="getPageNo"></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  name: "index",
  components: {
    Pagination
  },

  data() {
    return {
      pageNo: 1,
      pageSize: 30,
      total: 100,
      hotList: [],
      djList : [],
    }
  },
  methods: {
    getPageNo(page) {
      this.pageNo = page;
      this.getRadio();
    },
    async getRadio() {
      let result = await this.$API.reqRadio(this.$route.query.id, this.pageSize, (this.pageNo - 1) * this.pageSize);
      this.total = result.data.count;
      this.djList = result.data.djRadios
    },
    async getDjHot(){
      let result = await this.$API.reqRadio(this.$route.query.id,5,5);
      this.hotList = result.data.djRadios.slice(0,5);
    },
  },
  mounted() {
    this.getRadio()
    this.getDjHot()
  }
}
</script>

<style scoped lang="less">
.new {
  width: 900px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  margin-top: 10px;
  padding-bottom: 30px;

  .u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;

    h3 {

      float: left;
      font-size: 24px;
      font-weight: normal;

      .f-ff2 {
        color: #000;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      }
    }

    .more {
      font-size: 12px;
      float: right;
      margin-top: 14px;
      color: #666;
    }

  }

  .m-rdilist {
    margin: 16px 0 0 -37px;

    li {
      float: left;
      width: 150px;
      margin-left: 37px;

      .u-cover {
        width: 150px;
        height: 150px;
        position: relative;
        display: block;
        color: #333;

        img {
          width: 150px;
          height: 150px;
        }
      }

      .f-fs2 {
        margin: 13px 0 6px;
        line-height: 16px;
        font-size: 14px;
        font-weight: normal;


        .f-fs1 {
          color: #333;
        }
      }

      .f-thide2 {
        -webkit-line-clamp: 2;
        line-height: 18px;
        color: #999;
      }
    }
  }

  .rdimore {
    width: 900px;
    margin: 0 auto;
    padding: 30px 0;
    height: auto;
    overflow: hidden;

    .u-title {
      height: 40px;
      border-bottom: 2px solid #c20c0c;

      h3 {

        float: left;
        font-size: 24px;
        font-weight: normal;

        .f-ff2 {
          color: #000;
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        }
      }

      .more {
        font-size: 12px;
        float: right;
        margin-top: 14px;
        color: #666;
      }

    }

    .rdilist {
      height: auto;
      overflow: hidden;
      margin-left: -30px;

      li {
        float: left;
        width: 435px;
        height: auto;
        overflow: hidden;
        margin-left: 30px;
        padding: 20px 0px;
        border-bottom: 1px solid rgb(231, 231, 231);

        .u-cover-rdi {
          margin-right: -200px;
          width: 120px;
          height: 120px;
          position: relative;
          display: block;
          float: left;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .cntr {
          margin-left: 140px;

          .f-fs3 {
            margin: 16px 0px 20px;

            .s-fc1 {
              color: #333;
              font-size: 18px;
            }
          }

          .note {
            margin-bottom: 6px;
            line-height: 20px;

            .u-icon {
              background-position: -50px -300px;
              width: 14px;
              height: 15px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon.png");
            }

            .sep {
              color: #333;
              margin-left: 5px;
              vertical-align: middle;
              word-wrap: break-word;
              word-break: break-word;
              white-space: normal;
            }
            .img{
              height: 13px;
              width: 13px;
              display: inline-block;
              vertical-align: middle;
            }
          }

          .s-sf4 {
            color: #999;
          }
        }
      }
    }
  }
}
</style>